<style lang="scss" scoped>
.content{
     padding-top:60px;
     position: fixed;
     width: 100%;
     height:100%;
    .section{
        max-width: 1366px;
        margin: 0 auto;
        font-size: 12px;
        height:100%;
        .left{
            float: left;
            width: calc(100% - 330px);
            height:calc(100% - 130px);
            padding-left: 20px;
            .tabs{
                overflow: hidden;
                width: 100%;
                margin-top:20px;
                .t1,.t2{
                    width: 49%;
                    float: left;
                    border:1px solid #E8E8E8;
                    height: 100px;
                    border-radius: 4px;
                    line-height: 100px;
                    font-size: 16px;
                    text-align: center;
                    color: #222222;
                    cursor: pointer;
                    img{
                        width: 40px;
                        vertical-align: middle;
                        margin-right:10px;
                    }
                    &:hover{
                        background: #F9FBFF;
                        border:1px solid #448EF7;
                    }
                }
                .active{
                    background: #F9FBFF;
                    border:1px solid #448EF7;
                }
                .t1{
                    margin-right: 2%;
                }
            }
            .need{
                clear: both;
                border-radius: 2px;
                border:1px solid #E8E8E8;
                margin-top:20px;
                padding: 20px;
                height:calc(100% - 200px);
                .title{
                    overflow: hidden;
                    .t,.airing{
                        float: left;
                    }
                    .t{
                      cursor: pointer;
                    }
                    .airing{
                        .font-icon{
                        background: url('../../assets/img/xiaoxi.png') no-repeat;
                        background-size:12px;
                        display: inline-block;
                        vertical-align:sub;
                        width: 12px;
                        height: 12px;
                        }
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        height: 20px;
                        background: #FAFAFA;
                        border: 1px solid #E8E8E8;
                        max-width: 300px;
                        line-height: 20px;
                        margin-left: 10px;
                        padding: 0 10px;
                        color: #212122;
                        font-size: 12px;
                        span{
                        color: #448EF7;
                        }
                    }
                    .btn{
                        font-size: 14px;
                        border-radius: 20px;
                        padding: 0 20px;
                        float: right;
                    }
                }
                .lists{
                    // margin: 10px 0px;
                    height:calc(100% - 45px);
                    overflow: auto;
                    .list{
                        overflow: hidden;
                        height:46px;
                        line-height: 46px;
                        .btn{
                        border-radius: 10px;
                        padding: 0 10px;
                        font-size: 12px;
                        float: left;
                        position: relative;
                        top:12px;
                        }
                        .lv{
                        background: #38CBB7;
                        }
                        .text{
                            padding-left: 4px;
                            color: #666665;
                            max-width: 65%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            float: left;
                        }
                        .looks{
                        float: right;
                        .btn{
                            float: left;
                            position: relative;
                            top:12px;
                            cursor: pointer;
                            height:20px;
                            line-height: 20px;
                        }
                        .btn1{
                            background: #EFF6FF;
                            border: 1px solid #458EF6;
                            border-radius: 18px;
                            color: #458EF6;
                            margin-right: 10px;
                            height: 22px;
                            line-height: 22px;
                        }
                        .btn2{
                            background: #FFFFFF;
                            border: 1px solid #DADADA;
                            border-radius: 18px;
                            color: #B9B9B9;
                            height: 22px;
                            line-height: 22px;
                        }
                        }
                    }
                    }
            }
        }
        .right{
            width: 290px;
            margin:20px 20px 0 0px;
            border:1px solid #E8E8E8;
            height:calc(100% - 210px);
            float: right;
            border-radius: 4px;
            padding: 20px;
            .select{
                padding-top:10px;
            }
            .lists{
                margin-top:20px;
                border-top:1px solid #E9E9E9;
                height:calc(100% - 100px);
                overflow: auto;
                .list{
                    padding-top:10px;
                    overflow: hidden;
                    cursor: pointer;
                    .img{
                        float: left;
                        width: 50px;
                        img{
                            width: 100%;
                        }
                    }
                    .info{
                        float: left;
                        padding-top:6px;
                        padding-left:10px;
                        .name{
                            font-weight: 600;
                            font-size: 14px;
                        }
                        .title{
                            font-size: 12px;
                            padding-top:6px;
                            width: 180px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .zanlist{
                      text-align: center;
                      color: #666665;
                    }
            }
        }
    }
}
::v-deep{
    .el-input-group__append{
        background: #448ef7;
        color: #fff;
        border:1px solid #448ef7;
    }
}
.dialogTop{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#000
  }
.subordinate01{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .hidout{
      width: 126px;
      text-align: center;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .myimport {
  .el-dialog {
    width: 736px !important;
    height: 360px;
    .el-dialog__header {
      height: 45px;
      padding: 15px 15px 0 30px;
      .el-dialog__title {
        position: relative;
        font-size: 14px;
        font-weight: 600;
        line-height: 7px;
        &::before {
          content: "";
          position: absolute;
          top: 1px;
          left: -10px;
          display: block;
          width: 3px;
          height: 14px;
          background-color: #4b92f7;
        }
      }
      .el-dialog__headerbtn {
        top: 12px;
      }
    }
  }
  .el-dialog__body {
    padding: 0;
    .main {
      width: 694px;
      margin: 0 auto;
      border-top: 1px solid #d4d4d4;
      padding-top: 22px;
      .steps {
        width: 665px;
        height: 45px;
        margin: 0 auto;
        // background: rgb(233, 203, 203);
        .one {
          float: left;
          width: 255px;
          .yuan {
            float: left;
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #999;
          }
          .yuanActive{
            border: 1px solid #448EF7;
            background: #448EF7;
            color: #fff;
          }
          .title {
            position: relative;
            float: left;
            margin: 0 16px 0 11px;
            font-size: 13px;
            line-height: 30px;
            .info {
              float: left;
              position: absolute;
              top: 22px;
              left: 0;
              width: 150px;
              font-size: 12px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: rgb(170, 169, 169);
            }
          }
          .xian {
            float: left;
            width: 135px;
            height: 2.5px;
            background-color: #999;
            margin-top: 14px;
          }
          .xianActive{
            background-color: #448EF7;
          }
        }
        .last {
          float: left;
          width: 150px;
        }
      }
      .displayshow {
        width: 100%;
        height: 156px;
        margin-top: 26px;
        // margin: 26px 0;
        overflow: hidden;
        .two{
          float: left;
          margin-left: 32%;
          margin-right: 8%;
        }
        .displayshowimg{
          width: 100%;
          text-align: center;
          margin-top: 10px;
          img{
            width: 60px;
          }
          .importimg{
            width: 120px;
          }
        }
        .displayshowbtn{
          text-align: center;
          margin-top: 10px;
          .sucessContent{
            width: 80%;
            display: block;
            background: #F8F8F8;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding: 0 2%;
            span{
              float: right;
              cursor: pointer;
              width: 20px;
              text-align: center;
            }
          }
        }
        .importend{
          color: #448EF7;
        }
      }
      .uploadError {
        overflow: auto;
        border: 1px solid #eee;
        padding: 7px;
        p{
          color: red;
        }
        ul{
          padding-left: 3%;
          line-height: 20px;
          color: red;
        }
      }
      .tipsTitle{
        width: 100%;
        text-align: left;
        color: #CF352E;
        height: 30px;
        font-family: PingFang SC;
      }
      .footer {
        width: 100%;
        text-align: right;
      }
    }
  }
}
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>
<template>
  <div class="content">
    <bxHeader @date="date" />
    <bxTitle />
    <bxTab />
    <div class="section">

      <div class="left">
        <div class="tabs">
          <draggable>
            <transition-group>
              <div key="1" class="t1 item" @click="tabClick('MT21000', 0)">
                <img src="../../assets/img/shenhe.png">
                审核下属一人一表
              </div>
            </transition-group>
            <transition-group>
              <div key="2" class="t2 item" @click="tabClick('MT22000', 1)">
                <img src="../../assets/img/dianping.png">
                点评下属一人一表
              </div>
            </transition-group>
          </draggable>
        </div>

        <div class="need">
          <div class="title">
            <!-- <p class="h2 t">我的待办</p>
            <p class="h3 t">我的已办</p> -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我的待办" name="todoList" />
              <el-tab-pane label="我的已办" name="haveToDoList" />
            </el-tabs>
            <!-- <p class="airing">
              <i class="font-icon" />
              全部待办36条，已处理10条，未处理
              <span>26</span>
              条
            </p>
            <p v-show="activeName === 'todoList'" class="m_primary btn" @click="readAllTask">全部已阅</p> -->
          </div>
          <div class="lists">
            <ul v-loading="loading">
              <li v-for="(item,index) in todoList" :key="index" class="list">
                <p v-if="item.myself==='1'" class="btn m_primary">我的</p>
                <p v-if="item.myself==='0'" class="btn m_primary lv">下属</p>
                <p v-show="item.createTime" class="text">【{{ item.createTime }}】{{ item.message }}</p>
                <p v-show="!item.createTime" class="text">{{ item.message }}</p>
                <div class="looks">
                  <p v-if="show(item,['-3','-2'])" class="btn btn1" @click="goFallIn(item)">前往填写</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'todoList'" class="btn btn1" @click="goFallIn(item)">查看</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'haveToDoList'" class="btn btn1" @click="goHaveToDo(item)">查看</p>
                  <!-- <p v-show="activeName === 'todoList'" class="btn btn2" @click="readTask(item)">已阅</p> -->
                  <p v-if="show(item,['2','3','5','6','8'])" class="btn btn2" @click="readTask(item)">已阅</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right">
        <div v-show="!isAllSub" class="h2">
          我的下属
        </div>

        <el-tabs v-if="isAllSub" v-model="subName" @tab-click="handleSub">
          <el-tab-pane label="我的下属" name="mySub" />
          <el-tab-pane label="全部" name="myHave" />
        </el-tabs>
        <div class="select">
          <el-input v-model="input" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
          </el-input>
        </div>
        <div v-loading="subLoading" class="lists">
          <ul v-show="subName === 'mySub'">
            <li v-for="(item,index) in subordinatesList" :key="index" class="list" @click="mentSearch(item)">
              <div class="img">
                <img src="../../assets/img/head.png" alt="">
              </div>
              <div class="info">
                <p class="name">{{ item.empName }}</p>
                <el-tooltip class="item" effect="dark" :content="item.jobName" placement="top">
                  <p class="title">{{ item.jobName }}</p>
                </el-tooltip>

              </div>
            </li>
            <li v-show="subordinatesList.length === 0" class="list zanlist">暂无数据</li>
          </ul>
          <el-tree v-show="subName === 'myHave'" :key="expandKey" highlight-current :default-expand-all="expandAll" :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
            <span slot-scope="{ node }" class="span-ellipsis">
              <span :title="node.title">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <bxFooter />
    <el-dialog
      title="选择下属"
      :visible.sync="dialogVisible"
      class="myimport"
      width="55%"
      append-to-body
      style="font-size: 12px !important"
      top="25vh"
    >
      <div class="dialogTop">
        姓名：
        <el-input
          v-model="subordinatesValue"
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
        />
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
      <div>
        <el-carousel indicator-position="none" :loop="false" :autoplay="false" arrow="always" type="card" height="100px" style="margin-top:20px">
          <el-carousel-item v-for="item in listSubordinatesTwo" :key="item.id" class="subordinate01" @click.native="clickUser(item)">
            <img src="../../assets/img/photo.png" alt="">
            <p>{{ item.empName }} <span v-if="item.tip">（{{ item.tip }}）</span></p>
            <el-tooltip class="item" effect="dark" :content="item.jobName" placement="top">
              <p class="title">{{ item.jobName }}</p>
            </el-tooltip>
          </el-carousel-item>
          <p v-if="listSubordinatesTwo.length === 0" style="text-align:center">暂无数据</p>
        </el-carousel>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bxHeader from '@/components/headerFooter/header'
import bxTab from '@/components/tab/index'
import bxTitle from '@/components/tab/auditTitle.vue'
import bxFooter from '@/components/headerFooter/footer'
import draggable from 'vuedraggable'
export default {
  components: {
    bxFooter,
    bxHeader,
    bxTab,
    bxTitle,
    draggable
  },
  data() {
    return {
      dealWay: 0,
      input: '', // right -- 选择下属搜索框
      dialogVisible: false,
      loading: false,
      subLoading: false,
      year: '',
      menuEname: '',
      activeName: 'todoList',
      isAllSub: false,
      subName: 'mySub',
      treeData: [], // 树的内容
      expandAll: false,
      expandKey: 0,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      todoList: [], // 待办list
      subordinatesList: [], // right--我的下属list
      subordinatesValue: '', // 弹框-选择下属搜索框
      listSubordinatesTwo: [] // 弹框-选择下属--下属list
    }
  },
  mounted() {
    this.subordinatesAxios()
    this.isLooker()
  },
  methods: {
    handleNodeClick(data) { // 树
      console.log(data)
      if (data.treeLevel === '3') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'getReportIdForUser',
          'serviceName': 'MT01102',
          'reportYear': this.year,
          'empCode': data.empCode
        }).then((res) => {
          if (res.isSuccess) {
            console.log(res)
            if (res.data.reportId === null) {
              this.$message({
                type: 'info',
                message: '该下属目前还没有审批通过的"一人一表"数据！'
              })
            } else {
              this.$router.push({
                path: '/auditView',
                query: {
                  reportId: res.data.reportId
                }
              })
            }
          }
        })
      }
    },
    handleSub(tab) {
      this.input = ''
      if (tab.name === 'mySub') {
        this.subordinatesAxios()
      }
      if (tab.name === 'myHave') {
        this.allHaveSub()
      }
    },
    handleSearch() {
      if (this.subName === 'mySub') {
        this.subordinatesAxios()
      }
      if (this.subName === 'myHave') {
        this.allHaveSub()
      }
    },
    handleClick(tab, event) {
      if (tab.name === 'todoList') {
        this.init()
      }
      if (tab.name === 'haveToDoList') {
        this.haveToDo()
      }
    },
    show(item, arr) {
      return arr.indexOf(item.taskType) !== -1
    },
    date(val) {
      this.year = val
      this.init(this.year)
    },
    isLooker() { // 我的下属--全部--->权限
      this.$http.post('/serviceAction/common', {
        'methodName': 'isLooker',
        'serviceName': 'MT01001'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          this.isAllSub = res.data
        }
      })
    },
    init(val) { // 初始化待办list
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01108',
        'methodName': 'getApproveTask',
        'reportYear': val || this.year
      }).then((res) => {
        if (res.isSuccess) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    haveToDo(val) { // 初始化已办list
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'methodName': 'getReadApproveTask',
        'serviceName': 'MT01108',
        'reportYear': val || this.year
      }).then((res) => {
        if (res.isSuccess) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    allHaveSub() { // 我的下属--全部-->树的数据
      this.subLoading = true
      this.$http.post('/serviceAction/common', {
        'methodName': 'getAllUserTree',
        'serviceName': 'MT01001',
        'nameLike': this.input
      }).then((res) => {
        if (res.isSuccess) {
          console.log(res)
          this.treeData = res.data
          console.log(this.input)
          if (this.input !== '') {
            this.expandAll = true
          } else {
            this.expandAll = false
          }
          this.expandKey++
          this.subLoading = false
          console.log(this.expandAll)
          // this.input = ''
        }
      })
    },
    subordinatesAxios() { // right--我的下属list
      this.subLoading = true
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01105',
        'methodName': 'getFlowConfigUser',
        'nameLike': this.input
      }).then((res) => {
        if (res.isSuccess) {
          this.subordinatesList = res.data
          this.subLoading = false
          // this.input = ''
        }
      })
    },
    getTabValue(nameLike, serviceName, methodName) { // 选择下属弹框中的数据
      this.$http.post('/serviceAction/common', {
        'serviceName': serviceName,
        'methodName': methodName,
        'reportYear': this.year,
        'nameLike': nameLike
      }).then((res) => {
        if (res.isSuccess) {
          this.listSubordinatesTwo = res.data
        }
      })
    },
    tabClick(val, dealWay) { // 点击tab
      this.dealWay = dealWay
      this.subordinatesValue = ''
      this.dialogVisible = true
      this.menuEname = val
      if (val === 'MT21000') {
        this.getTabValue(this.subordinatesValue, 'MT01105', 'getPendingUser')
      } else if (val === 'MT22000') {
        this.getTabValue(this.subordinatesValue, 'MT01107', 'getPendingUser')
      }
    },
    clickUser(item) { // 选择下属弹框--点击人头
      console.log(item)
      if (this.menuEname === 'MT21000') {
        item.dealWay = this.dealWay
        const linshi = this.$store.state.tab.tabArr
        const isHas = linshi.some((it) => {
          return it.empCode === item.empCode
        }) && false
        if (!isHas) {
          this.$store.commit('tab/ADD_TABARR', item)
          this.$store.commit('tabClick/click', linshi.length - 1)
        }
        this.$router.push({
          path: '/reviewIndex',
          query: {
            reportHistoryId: item.reportHistoryId,
            empCode: item.empCode
          }
        })
      }
      if (this.menuEname === 'MT22000') {
        this.$router.push({
          path: '/auditQuarter',
          query: {
            reportId: item.reportId,
            quarterNumber: item.quarterNumber
          }
        })
      }
    },
    search() { // 弹框-选择下属-搜索按钮
      console.log('search')
    },
    mentSearch(item) { // 页面--选择下属--点击下属
      console.log(item)
      this.$http.post('/serviceAction/common', {
        'empCode': item.empCode,
        'methodName': 'getReport',
        'reportYear': this.year,
        'serviceName': 'MT01106'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          if (res.data === '-1') {
            this.$message({
              type: 'info',
              message: '该下属目前还没有审批通过的"一人一表"数据！'
            })
          } else {
            this.$router.push({
              path: '/auditView',
              query: {
                reportId: res.data
              }
            })
          }
        }
      })
    },
    goFallIn(item) { // 待办按钮事件
      if (['1', '4'].includes(item.taskType)) {
        const linshi = this.$store.state.tab.tabArr
        item.dealWay = 0
        const isHas = linshi.some((it) => {
          return it.empCode === item.empCode
        }) && false
        if (!isHas) {
          this.$store.commit('tab/ADD_TABARR', item)
          this.$store.commit('tabClick/click', linshi.length - 1)
        }
        this.$router.push({
          path: '/reviewIndex', // 审核页面
          query: {
            reportHistoryId: item.reportHistoryId,
            empCode: item.empCode,
            edit: '1'
          }
        })
        return
      }
      if (['7'].includes(item.taskType)) {
        this.$router.push({
          path: '/auditQuarter', // 点评页面
          query: {
            reportId: item.reportId,
            quarterNumber: item.quarterNumber
          }
        })
        return
      }
    },
    goHaveToDo(item) { // 已办查看按钮
      if (['1', '2', '3', '4', '5', '6'].includes(item.taskType)) {
        this.$router.push({
          path: '/subordinates', // 领导审核之后的页面
          query: {
            reportHistoryId: item.reportHistoryId,
            opinion: '1'
          }
        })
        return
      }
      if (['7', '8'].includes(item.taskType)) {
        this.$router.push({
          path: '/auditSeeQuarter', // 领导点评之后的页面
          query: {
            reportId: item.reportId,
            quarterNumber: item.quarterNumber,
            option: '1'
          }
        })
        return
      }
    },
    readTask(item) { // 已阅
      this.$http.post('/serviceAction/common', {
        'methodName': 'readTask',
        'taskIdList': [item.taskId],
        'serviceName': 'MT01108'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          this.init()
        }
      })
    },
    readAllTask() { // 全部已阅
      console.log(this.todoList)
      const params = []
      this.todoList.map(item => {
        params.push(item.taskId)
      })
      this.$http.post('/serviceAction/common', {
        'methodName': 'readTask',
        'taskIdList': params,
        'serviceName': 'MT01108'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          this.init()
        }
      })
    }
  }
}
</script>
